<template>
    <NCard title="钱包配置">
        <NForm :model="form" inline>
            <NFormItem label="USDT-HKD 汇率" path="usdthkdRate">
                <NInput v-model:value="form.usdthkdRate" placeholder="请输入"> </NInput>
            </NFormItem>
            <NFormItem label="HKD-USDT 汇率" path="hkdusdtRate">
                <NInput v-model:value="form.hkdusdtRate" placeholder="请输入"> </NInput>
            </NFormItem>
            <NFormItem label="转账 USDT 手续费" path="transferUsdtFee">
                <NInput v-model:value="form.transferUsdtFee" placeholder="请输入">
                    <template #suffix>USDT</template>
                </NInput>
            </NFormItem>
            <NFormItem label="转账 HKD 手续费" path="transferHkdFee">
                <NInput v-model:value="form.transferHkdFee" placeholder="请输入">
                    <template #suffix>HKD</template>
                </NInput>
            </NFormItem>
            <NFormItem label="提现USDT-TRC20手续费" path="withdrawUsdtTrc20Fee">
                <NInput v-model:value="form.withdrawUsdtTrc20Fee" placeholder="请输入">
                    <template #suffix>USDT</template>
                </NInput>
            </NFormItem>
            <NFormItem label="提现USDT-ERC20手续费" path="withdrawUsdtErc20Fee">
                <NInput v-model:value="form.withdrawUsdtErc20Fee" placeholder="请输入">
                    <template #suffix>USDT</template>
                </NInput>
            </NFormItem>
            <NFormItem>
                <NButton type="primary" @click="submit" :loading="loading">确定</NButton>
            </NFormItem>
        </NForm>
    </NCard>
</template>

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import { updateWalletConfig } from '@/api/config'
import { useMessage, type FormRules } from 'naive-ui'

const { config } = defineProps<{
    config: Api.Config.WalletConfig | null
}>()

const message = useMessage()
const form = ref<Api.Config.WalletConfig>({
    usdthkdRate: '',
    hkdusdtRate: '',
    transferUsdtFee: '',
    transferHkdFee: '',
    withdrawUsdtErc20Fee: '',
    withdrawUsdtTrc20Fee: ''
})

watchEffect(() => {
    if (config) {
        Object.assign(form.value, config)
    }
})

const loading = ref(false)
async function submit() {
    loading.value = true
    const [err, res] = await updateWalletConfig(form.value)
    loading.value = false
    if (!err && res) {
        message.success('操作成功')
    }
}
</script>
